<template>
	<view class="">
		<view class="sertop">
			<u-search bgColor="#fff" v-model="sou" placeholder="请输入商品名称" borderColor="#ccc" @custom="search"
				:showAction="true" actionText="搜索" :animation="false"></u-search>
		</view>
		<view class="sear_record">
			<view class="search_rTit">
				<text class="search_pa">历史搜索</text>
				<text @click="show=true" class="iconfont icon-lajitong"></text>
				<u-popup :show="show" mode="center" @close="close">
					<button @click="shu">您确定清空历史记录吗</button>
					<!-- <text></text> -->
				</u-popup>
			</view>
			<view class="search_hotBox">
				<text v-for="item in soulist" @click="navTo(`/pages/index/search_list?keyword=${item}`)">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sou: '',
				soulist: [],
				show: false
			};
		},
		// 输入监听
		inputWord(e) {
			// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
			// 节流,避免输入过快多次请求
			this.searchTimer && clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.doSearch(this.sou)
			}, 300)
		},
		onLoad() {
			this.soulist = uni.getStorageSync('searchHistory') || [];
		},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			},
			shu() {
				this.soulist = [];
				uni.removeStorageSync('searchHistory')
				this.show=false
			},
			search() {
				// console.log(this.sou)
				if (!this.sou.trim()) {
					uni.$u.toast('请输入搜索内容');
					return;
				}
				let index = this.soulist.indexOf(this.sou);
				// console.log(index)
				if (index >= 0) {
					this.soulist.splice(0, 1)
					// console.log(12)
				}
				this.soulist.unshift(this.sou);
				// this.soulist.push(this.sou)
				uni.setStorageSync('searchHistory', this.soulist)
				uni.navigateTo({
					url: `/pages/index/search_list?keyword=${this.sou}`
				})


			}
		}
	};
</script>

<style lang="scss">
	.sertop {
		padding: 15px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	page {
		background: #fff;
	}

	/deep/ .cl-card__header {
		height: 0;
	}

	/deep/ .cl-card {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
		border-radius: 0;
	}

	/deep/ .cl-button.cl-button--success {
		background-color: $color1;
		border-color: $color1;
	}

	.sear_record {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 0 30upx;
	
	.search_rTit {
			width: 100%;
			height: auto;

			overflow: hidden;

			.search_pa {
				font-size: 30upx;
				color: #333;
				line-height: 80upx;
				font-weight: bold;
			}

			.iconfont {
				font-size: 36upx;
				float: right;
				line-height: 80upx;
				color: #666;
			}
		}

		.search_hotBox {
			width: 100%;
			height: auto;
			overflow: hidden;

			text {
				display: inline-block;
				font-size: 28upx;
				line-height: 56upx;
				background: #eee;
				padding: 0 30upx;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 40upx;
			}
		}
	}
</style>
